<template>
    <div>
        <div fixed class="top">
            <div v-if="data" class="left">
                <div class="kuang">
                     <img class="tou" :src="data[0].upic" alt="">
                </div>
                <div class="name">
                    <span class="sp">{{data[0].uname}}</span>
                    <img class="deng" src="@/assets/nameicon.png" alt="">
                </div>
                
            </div >
          
            <div v-else class="left">
                <div class="kuang">
                     <img class="tou" src="@/assets/moren.webp" alt="">
                </div>
                <div class="denglu">
                <router-link to="/login">
                    <button class="bbttnn" v-if="!data">点击登录</button>
                </router-link>
                
            </div >
                
              
            </div >
           
           <button>
                <van-icon class="i" size="30" name="arrow" />
            </button>
        </div>
        <div class="middle1">
          <div class="gezi1">
            <span v-if="data" class="s" style="font-weight:bold">{{data[0].attention}}</span>
            <span v-else class="s" style="font-weight:bold">0</span>
            <span class="s1">关注</span>
          </div>
          <div class="gezi">
            <span v-if="data" class="s" style="font-weight:bold">{{data[0].fans}}</span>
            <span v-else class="s" style="font-weight:bold">0</span>
            <span class="s1">粉丝</span>
          </div>
        </div>
        <div class="middle2">
            <p class="lan">这个人很懒~什么都没留下~</p>
        </div>
        <div class="middle3">
            <div class="gezi4">
            <svg t="1665735437811" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2717" width="200" height="200"><path d="M128 64a64 64 0 0 0-64 64v760a64 64 0 0 0 94.72 56.128l293.44-160.384a128 128 0 0 1 123.072 0.192l289.92 159.424A64 64 0 0 0 960 887.296V128a64 64 0 0 0-64-64H128z m0-64h768a128 128 0 0 1 128 128v759.296a128 128 0 0 1-189.696 112.192l-289.92-159.488a64 64 0 0 0-61.504-0.064L189.376 1000.32A128 128 0 0 1 0 888V128a128 128 0 0 1 128-128z" fill="#333333" p-id="2718"></path><path d="M467.328 563.328a96 96 0 0 1 89.344 0l63.36 33.28-12.16-70.464a96 96 0 0 1 27.648-84.992l51.2-49.92-100.736-14.656a38.4 38.4 0 0 1-28.928-20.992L512 264.32l-45.056 91.264a38.4 38.4 0 0 1-28.928 20.992l-100.736 14.72 72.96 71.04a38.4 38.4 0 0 1 11.008 33.92l-17.28 100.352 63.36-33.28z m279.936-227.968a38.4 38.4 0 0 1 21.248 65.472l-88.32 86.144a32 32 0 0 0-9.216 28.352l20.864 121.6a38.4 38.4 0 0 1-55.68 40.448l-109.248-57.408a32 32 0 0 0-29.824 0l-109.184 57.408a38.4 38.4 0 0 1-55.68-40.448l23.68-138.24-100.48-97.856a38.4 38.4 0 0 1 21.312-65.472l138.752-20.16 62.08-125.76a38.4 38.4 0 0 1 68.864 0l62.08 125.76 138.752 20.16z" fill="#333333" p-id="2719"></path></svg>
            <span class="s2">我的收藏</span>
          </div>
          <div class="gezi4">
         <svg t="1665737830257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3566" width="200" height="200"><path d="M857.6 128H853.333333l-332.8 132.266667c-4.266667 0-8.533333 0-8.533333 4.266666-4.266667 0-4.266667-4.266667-8.533333-4.266666L170.666667 128h-4.266667c-21.333333 0-38.4 17.066667-38.4 38.4V725.333333c0 21.333333 12.8 34.133333 34.133333 38.4l332.8 132.266667h4.266667c4.266667 0 8.533333 0 12.8-4.266667 4.266667 0 8.533333 4.266667 12.8 4.266667h4.266667l332.8-132.266667c17.066667-4.266667 34.133333-17.066667 34.133333-38.4V166.4c0-21.333333-17.066667-38.4-38.4-38.4z m-682.666667 593.066667V179.2l315.733334 123.733333v541.866667l-315.733334-123.733333z m674.133334 0l-315.733334 123.733333V302.933333l315.733334-123.733333v541.866667z m0 0" p-id="3567" fill="#2c2c2c"></path><path d="M401.066667 439.466667L260.266667 379.733333c-8.533333 0-12.8 8.533333-12.8 17.066667v12.8c0 8.533333 8.533333 17.066667 12.8 17.066667l140.8 59.733333c8.533333 0 12.8-8.533333 12.8-17.066667v-12.8c0-12.8-4.266667-17.066667-12.8-17.066666z m0 179.2l-140.8-59.733334c-8.533333 0-12.8 8.533333-12.8 17.066667v12.8c0 8.533333 8.533333 17.066667 12.8 17.066667l140.8 59.733333c8.533333 0 12.8-8.533333 12.8-17.066667v-12.8c0-12.8-4.266667-17.066667-12.8-17.066666z m226.133333-140.8L768 418.133333c8.533333 0 12.8-8.533333 12.8-17.066666v-8.533334c0-8.533333-8.533333-17.066667-12.8-17.066666l-140.8 59.733333c-8.533333 0-12.8 8.533333-12.8 17.066667v12.8c0 8.533333 4.266667 12.8 12.8 12.8z m0 179.2L768 597.333333c8.533333 0 12.8-8.533333 12.8-17.066666v-12.8c0-8.533333-8.533333-17.066667-12.8-17.066667l-140.8 59.733333c-8.533333 0-12.8 8.533333-12.8 17.066667v12.8c0 12.8 4.266667 17.066667 12.8 17.066667z m0 0" p-id="3568" fill="#2c2c2c"></path></svg>
            <span class="s2">我的课程</span>
          </div>
          <div class="gezi4">
         <svg t="1665737751600" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2736" width="200" height="200"><path d="M858.886063 486.66168a31.912241 31.912241 0 0 0 63.824483 0h-63.824483z m-397.626527 537.210671a31.912241 31.912241 0 0 0 0-63.824483v63.824483zM233.980553 63.824483h555.84742v-63.824483H233.916729v63.824483z m555.84742 0c38.167041 0 69.121915 30.954874 69.121915 69.121914h63.824482c0-73.398155-59.548242-132.946397-132.946397-132.946397v63.824483zM233.916729 960.047868a69.121915 69.121915 0 0 1-69.121915-69.185739h-63.824482c0 73.398155 59.548242 133.010222 132.946397 133.010222v-63.824483zM164.794814 890.862129V132.946397h-63.824482v757.915732h63.824482z m0-757.915732c0-38.167041 30.954874-69.121915 69.121915-69.121914v-63.824483c-73.398155 0-132.946397 59.548242-132.946397 132.946397h63.824482z m694.091249 0v353.715283h63.824483V132.946397h-63.824483z m-397.626527 827.101471H233.980553v63.824483h227.406632v-63.824483zM735.385689 511.936176a255.297931 255.297931 0 1 0 0 510.595861 255.297931 255.297931 0 0 0 0-510.595861z m0 63.824482a191.473448 191.473448 0 1 1 0 382.946896 191.473448 191.473448 0 0 1 0-382.946896z" fill="#2c2c2c" p-id="2737"></path><path d="M729.386188 607.6729a25.91274 25.91274 0 0 0-25.91274 25.912739v129.5637c0 14.296684 11.616056 25.91274 25.91274 25.91274h77.73822a25.91274 25.91274 0 0 0 0-51.82548h-51.82548V633.585639a25.91274 25.91274 0 0 0-25.91274-25.912739z" fill="#2c2c2c" p-id="2738"></path><path d="M320.526552 192.813762m31.912241 0l319.122414 0q31.912241 0 31.912241 31.912241l0 0q0 31.912241-31.912241 31.912242l-319.122414 0q-31.912241 0-31.912241-31.912242l0 0q0-31.912241 31.912241-31.912241Z" fill="#2c2c2c" p-id="2739"></path><path d="M320.526552 352.374969m31.912241 0l319.122414 0q31.912241 0 31.912241 31.912241l0 0q0 31.912241-31.912241 31.912242l-319.122414 0q-31.912241 0-31.912241-31.912242l0 0q0-31.912241 31.912241-31.912241Z" fill="#2c2c2c" p-id="2740"></path></svg>
            <span class="s2">浏览历史</span>
          </div>
          <div class="gezi4">
         <svg t="1665737830257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3566" width="200" height="200"><path d="M857.6 128H853.333333l-332.8 132.266667c-4.266667 0-8.533333 0-8.533333 4.266666-4.266667 0-4.266667-4.266667-8.533333-4.266666L170.666667 128h-4.266667c-21.333333 0-38.4 17.066667-38.4 38.4V725.333333c0 21.333333 12.8 34.133333 34.133333 38.4l332.8 132.266667h4.266667c4.266667 0 8.533333 0 12.8-4.266667 4.266667 0 8.533333 4.266667 12.8 4.266667h4.266667l332.8-132.266667c17.066667-4.266667 34.133333-17.066667 34.133333-38.4V166.4c0-21.333333-17.066667-38.4-38.4-38.4z m-682.666667 593.066667V179.2l315.733334 123.733333v541.866667l-315.733334-123.733333z m674.133334 0l-315.733334 123.733333V302.933333l315.733334-123.733333v541.866667z m0 0" p-id="3567" fill="#2c2c2c"></path><path d="M401.066667 439.466667L260.266667 379.733333c-8.533333 0-12.8 8.533333-12.8 17.066667v12.8c0 8.533333 8.533333 17.066667 12.8 17.066667l140.8 59.733333c8.533333 0 12.8-8.533333 12.8-17.066667v-12.8c0-12.8-4.266667-17.066667-12.8-17.066666z m0 179.2l-140.8-59.733334c-8.533333 0-12.8 8.533333-12.8 17.066667v12.8c0 8.533333 8.533333 17.066667 12.8 17.066667l140.8 59.733333c8.533333 0 12.8-8.533333 12.8-17.066667v-12.8c0-12.8-4.266667-17.066667-12.8-17.066666z m226.133333-140.8L768 418.133333c8.533333 0 12.8-8.533333 12.8-17.066666v-8.533334c0-8.533333-8.533333-17.066667-12.8-17.066666l-140.8 59.733333c-8.533333 0-12.8 8.533333-12.8 17.066667v12.8c0 8.533333 4.266667 12.8 12.8 12.8z m0 179.2L768 597.333333c8.533333 0 12.8-8.533333 12.8-17.066666v-12.8c0-8.533333-8.533333-17.066667-12.8-17.066667l-140.8 59.733333c-8.533333 0-12.8 8.533333-12.8 17.066667v12.8c0 12.8 4.266667 17.066667 12.8 17.066667z m0 0" p-id="3568" fill="#2c2c2c"></path></svg>
            <span class="s2">签到任务</span>
          </div>
        </div>
        <div class="bottom">
            <div class="b1">
                <button  :class="{ active: now == 1 }" @click="now = 1" class="btn2">食谱·<span>0</span></button>
                <button  :class="{ active: now == 2 }" @click="now = 2" class="btn3">作品·<span>0</span></button>
             </div>
            <div class="b2">
                <img src="@/assets/kong.png" alt="">
            </div>
        </div>
         <my-footer></my-footer>
    </div>
</template>

<script>
import MyFooter from '@/components/MyFooter.vue';
    export default {
         components: { MyFooter },
         data() {
            return {
                data:'',
                now:1,
            }
        },
       mounted () {
        this.getdata()
       },
       methods: {
        getdata() {
            let url=`/me/${this.$store.state.id}`
            this.$axios.get(url).then(res=>{
                this.data=res.data.data
                console.log(res)
            })
        }
       },
    }
</script>

<style lang="scss" scoped>
.active{
font-weight: bold;
border-bottom: 3px solid rgb(235,135,114);
}
    .top,.left{
    display: flex;
    
    }
    .kuang{
      
        border:1px solid gray;
        border-radius: 50%;
        overflow: hidden;
    }
    .tou{
        width: 90px;
        }
    .top{
    margin-top:20px;    
    height: 90px;
    width: 100%;
    justify-content: space-between;
 }
     .sp{
    display: block;
   font-size: 25px;
   font-weight: bold;
   margin:7px;
 }
 
.deng{
    width: 40px;
    height: 20px;
    display: block;
    margin-top:15px;
    margin-left:10px;
}

button{
    background-color:white;
    border:none;
}
 .left{
   margin-left:13px;
// display: flex;
// height: 100%;

 }
 .s{
    display: block;
 }
 .s1{
    display: block;
 }
 .middle1{
    display: flex;
    margin-top:15px ;
    margin-bottom:15px ;
 }
 .middle1>div{
  text-align: center;
  width: 25%;
 }
 .s1{
    color:gray;
    
 }
 .gezi1{
 border-right: 1px solid rgb(240, 239, 239);
 }
 .lan{
 margin-left:15px;
 font-size: 12px;
 color:gray;
 }
 svg{
    
    width: 22px;
    height:22px;
 }
 .middle3{
    display: flex;
    border-top:1px solid rgb(240, 239, 239);
    border-bottom:10px solid rgb(247, 246, 246);
    padding-top: 15px;
    padding-bottom: 15px;
    
 }
 .gezi4{
 width: 25%;
     text-align: center;
 }
 .s2{
   
    display: block;
    font-size:10px ;
 }
.bottom>.b2{
text-align: center;
}
.bottom>.b2>img{
    width:200px;
}
.bottom{
    padding-top: 20px;
    text-align: center;
}
.btn2{
    margin-right: 40px;
}
.bbttnn{
// border:2px solid  rgb(235,135,114);
padding: 5px;
border-radius: 5px;
display: block;
margin-top: 3vh;
margin-left: 3vw;
font-size: 22px;
// font-weight: ;
}
.denglu{
    height: 100%;

}
</style>